<!--
 * @Author: lvye
 * @Description:
 * @Date: 2023-08-04 11:02:18
 * @LastEditTime: 2023-10-11 18:41:54
 * @FilePath: \vue3-ts\src\views\main\system\user\user.vue
-->
<template>
  <div class="user">
    <!-- 搜索框 -->
    <page-search
      :searchFormConfig="searchFormConfig"
      @resetBtnClick="handleResetClick"
      @queryBtnClick="handleQueryClick"
    ></page-search>
    <!-- page-content -->
    <page-content
      :contentTableConfig="contentTableConfig"
      pageName="users"
      ref="pageContentRef"
      @newBtnClick="handleNewData"
      @editBtnClick="handleEditData"
    >
      <!-- oldPrice插槽 跨组件插槽  对于一些特殊的逻辑 我们需要在最外层控制-->
      <template #oldPrice="scope">
        <el-tag type="danger" size="mini">￥{{ scope.row.oldPrice }}</el-tag>
      </template>
    </page-content>
    <!-- page-model -->
    <page-modal
      :modalConfig="modalConfigRef"
      ref="pageModelRef"
      :defaultInfo="defaultInfo"
      pageName="users"
    >
    </page-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue"
import { useStore } from "@/store"
import { searchFormConfig } from "./config/search.config"
import { contentTableConfig } from "./config/content.config"
import { modalConfig } from "./config/modal.config"
import { usePageSearch } from "@/hooks/use-page-search"
import { usePageModal } from "@/hooks/use-page-modal"
export default defineComponent({
  name: "user",
  setup() {
    const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()
    // 密码显示逻辑调整，新建需要展示密码 编辑不需要展示密码
    const newCallback = () => {
      // 遍历modalConfig.formItems，找到密码项，将isHidden设置为false
      modalConfig.formItems.forEach((item) => {
        if (item.field === "password") {
          item.isHidden = false
        }
      })
    }
    const editCallback = () => {
      // 遍历modalConfig.formItems，找到密码项，将isHidden设置为true
      modalConfig.formItems.forEach((item) => {
        if (item.field === "password") {
          item.isHidden = true
        }
      })
    }
    // 动态获取部门和角色列表
    const store = useStore()
    const modalConfigRef = computed(() => {
      const departmentIdItem = modalConfig.formItems.find(
        (item) => item.field === "departmentId"
      )
      if (!departmentIdItem) return
      departmentIdItem.options = store.state.entireDepartment.map((item) => {
        return {
          title: item.name,
          value: item.id
        }
      })
      const roleItem = modalConfig.formItems.find(
        (item) => item.field === "roleId"
      )
      if (!roleItem) return
      roleItem.options = store.state.entireRole.map((item) => {
        return {
          title: item.name,
          value: item.id
        }
      })
      return modalConfig
    })
    const [pageModelRef, handleNewData, handleEditData, defaultInfo] =
      usePageModal(newCallback, editCallback)
    return {
      searchFormConfig,
      contentTableConfig,
      modalConfigRef,
      pageContentRef,
      handleResetClick,
      handleQueryClick,
      pageModelRef,
      defaultInfo,
      handleNewData,
      handleEditData
    }
  }
})
</script>

<style scoped></style>
